<template>
  <div class="full-btn" @click="clickHandler">
      <SvgIcon name="full"/>
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
    name: 'FullScreen',
    setup(){
        const clickHandler = ()=>{
            if(screenfull.isEnabled){
                screenfull.toggle()
            }
        }

        return{
            clickHandler
        }
    }
}
</script>

<style lang='scss'>
    .full-btn{
        display: inline-block;
        padding: 0 17px;
        &:hover{
            cursor: pointer;
            background-color: rgba(0,0,0,0.3);
        }
    }
</style>